<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>健康饮食推荐</title>
<meta name="keywords" content="BootDo管理系统">
<meta name="description" content="BootDo管理系统">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/login.css" rel="stylesheet">

<!-- 解决session超时登录跳转页面内嵌问题 -->
<script>
	if (window.top !== window.self) {
	    window.top.location = window.location;
	}
</script>
</head>

<body class="signin">
	<div class="signinpanel">
		<div class="row">
			<div class="col-sm-7">
				<div class="signin-info">
					<div class="logopanel m-b">
						<h1>健康饮食推荐系统</h1>
					</div>
				</div>
			</div>
			<div class="col-sm-5">
				<form id="signupForm">
					<h3 class="text-center">用户登录</h3>
					<p class="m-t-md text-center">欢迎登录健康饮食推荐系统</p>
					<input type="text" name="username" PLACEHOLDER="请输入账号" class="form-control uname" />
					<input type="password" name="password" PLACEHOLDER="请输入密码" class="form-control pword m-b" />

					<div class="form-control" style="text-align:center;">
						<label class="radio-inline">
							<input type="radio" name="userType" value="1" checked>普通用户
						</label>
<!--						<label class="radio-inline">-->
<!--							<input type="radio" name="userType" value="2">教师-->
<!--						</label>-->
						<label class="radio-inline">
							<input type="radio" name="userType" value="3">管理员
						</label>
					</div>

	                <div class="row">
	                    <div class="col-xs-6 pull_left">
	                        <div class="form-group">
	                            <input class="form-control" type="tel" name="verify" id="verify" placeholder="请输入验证码" maxlength="4">
	                        </div>
	                    </div>
	                    <div class="col-xs-6 pull_left">
	                        <a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">
	                            <img style="margin-top: 12px;" id="imgVerify" src="" alt="更换验证码" height="36" width="100%" onclick="getVerify(this);">
	                        </a>
	                    </div>
	                </div>

					<a id="login" class="btn btn-login btn-block" >登录</a>
					<a id="register" class="btn btn-login btn-block" >注册</a>
				</form>
			</div>
		</div>
		<div class="signup-footer">
			<div class="pull-left">&copy; 2020 健康饮食推荐系统 </div>
		</div>
	</div>
<script th:inline="javascript"> 
	var ctx = [[@{/}]] ; 
</script>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/js/ajax-util.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js" th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>

<script type="text/javascript">

	//登录提交
	$(document).ready(function () {
	    $("#login").on('click', function () {
	        $("#signupForm").submit();
	    });
	    validateRule();
	    $("body").keydown(keyDownLogon);
	    $("#imgVerify").click()
		$("#register").on('click',function () {
			parent.location.href = '/register';
		});
	});

	$.validator.setDefaults({
	    submitHandler: function () {
	        login();
	    }
	});

	//提交至后台
	function login() {
	    $.ajax({
	        type: "POST",
	        url: "/login",
	        data: $('#signupForm').serialize(),
	        success: function (r) {
	            if (r.code == 0) {
	                parent.location.href = '/index';
	            } else {
					layer.msg(r.msg);
	            }
	        },
	    });
	}
   
	//键盘Enter按键
	function keyDownLogon() {
	    if (event.keyCode == "13") {
	        $("#login").trigger('click');
	    }
	}

	//表单校验
	function validateRule() {
	    var icon = "<i class='fa fa-times-circle'></i> ";
	    $("#signupForm").validate({
	        rules: {
	            username: {
	                required: true
	            },
	            password: {
	                required: true
	            }
	        },
	        messages: {
	            username: {
	                required: icon + "请输入您的用户名",
	            },
	            password: {
	                required: icon + "请输入您的密码",
	            }
	        }
	    })
	}
   
   //获取验证码
   function getVerify(obj) {
       obj.src = "/getVerify?" + Math.random();
       console.log(obj)
   }
    
</script>
</body>
</html>
